import { getLink, getLinks } from '@/services/ant-design-pro/links';
import { EyeOutlined, HeartFilled, HeartOutlined, ShareAltOutlined } from '@ant-design/icons';
import { GridContent, PageContainer } from '@ant-design/pro-layout';
import {
  Avatar,
  Badge,
  Button,
  Card,
  Col,
  Descriptions,
  Divider,
  Image,
  Layout,
  List,
  message,
  Rate,
  Row,
  Space,
  Tag,
  Tooltip,
  Typography,
} from 'antd';
import { useEffect, useState } from 'react';
import defaultPic from '@/assets/defaultIcon.png';
import defaultUser from '@/assets/defaultUser.jpg';
import styles from './index.less';
import TagList from '@/components/TagList';
import { history } from 'umi';
import CommentList from './CommentList';
import copy from 'copy-to-clipboard';
import ResourceCard from '@/components/ResourceCard';

const ResourceDetail = () => {
  const [resource, setResource] = useState([]);
  const [loading, setLoading] = useState(false);
  const [resources, setResources] = useState([]);
  const resourceId = history.location.query?.rid;
  const { isLike } = false;

  useEffect(() => {
    if (loading === false) {
      requestLink({ id: resourceId });
      setLoading(true);
    }
  });
  // 请求资源
  const requestLink = async (values) => {
    try {
      const res = await getLink({ ...values });
      // console.log(res);
      // console.log(res.data.id);

      setResource(res.data);
      requestSimilar(res.data.tips);
    } catch (error) {
      console.log(error);
    }
  };

  // 分享链接
  const doShare = () => {
    copy(`${resource.url}`);
    message.success('链接已复制，快去分享吧！');
  };

  // 取相似资源
  const requestSimilar = async (values) => {
    let num = 0;
    let similary = [];
    for (let i = 0; i < values.length; ++i) {
      let tip = {
        tip: values[i].id,
      };
      try {
        const res = await getLinks({ ...tip });
        for (let j = 0; j < res.data.length && num < 3; ++j) {
          ++num;
          similary.push(res.data[j]);
        }
      } catch (error) {
        console.log(error);
      }
    }
    setResources(similary);
  };

  return (
    <div>
      <GridContent>
        <Row gutter={24}>
          <Col xl={16} lg={24} xs={24}>
            <Card title="资源详情" bordered={false} style={{ marginBottom: 24 }}>
              {resource && (
                <div>
                  <div className={styles.avatarHolder}>
                    <Image
                      alt={resource.name}
                      src={resource.icon ? 'http://localhost:9999' + resource.icon : defaultPic}
                      height={100}
                    />
                    <div className={styles.name}>{resource.name}</div>
                    <div className={styles.tagBar}>
                      <Tooltip title="浏览量">
                        <Tag
                          icon={<EyeOutlined />}
                          color="#aaa"
                          style={{ marginLeft: 8, cursor: 'pointer' }}
                        >
                          {resource.visitCnt ?? 0}
                        </Tag>
                      </Tooltip>
                      <Tooltip title={isLike ? '取消收藏' : '收藏'}>
                        <Tag
                          icon={isLike ? <HeartFilled /> : <HeartOutlined />}
                          color="#cd201f"
                          style={{ marginLeft: 8, cursor: 'pointer' }}
                          // onClick={doLike}
                        >
                          {resource.bookmarkCnt}
                        </Tag>
                      </Tooltip>
                      <Tag
                        icon={<ShareAltOutlined />}
                        color="#55acee"
                        style={{ marginLeft: 8, cursor: 'pointer' }}
                        onClick={doShare}
                      >
                        分享
                      </Tag>
                    </div>
                    <div>{resource.desc}</div>
                    <TagList tips={resource.tips} style={{ textAlign: 'center' }} />
                  </div>
                  <Divider dashed />
                  <Descriptions column={1}>
                    {resource.url && (
                      <Descriptions.Item label="链接">
                        <Typography.Paragraph
                          copyable={{ text: resource.url }}
                          style={{ marginBottom: 0 }}
                        >
                          {/* eslint-disable-next-line react/jsx-no-target-blank */}
                          <a href={resource.url} target="_blank">
                            {resource.url}
                          </a>
                        </Typography.Paragraph>
                      </Descriptions.Item>
                    )}
                    <Descriptions.Item label="时间">{resource.uploadTime}</Descriptions.Item>
                    <Descriptions.Item label="荐者">
                      <Avatar
                        src={
                          resource.author?.avatar
                            ? 'http://localhost:9999' + resource.author?.avatar
                            : defaultUser
                        }
                        style={{ marginRight: 5 }}
                      />
                      {resource.author?.nikename}
                    </Descriptions.Item>
                  </Descriptions>
                </div>
              )}
            </Card>
            <CommentList comments={resource.comments} resourceId={resource.id}></CommentList>
          </Col>
          <Col xl={8} lg={24} xs={24}>
            <Card title="相似资源">
              <List
                rowKey="id"
                // grid={listGrid}
                // loading={loading}
                pagination={{
                  showSizeChanger: false,
                  // pageSize,
                  // total,
                }}
                dataSource={resources}
                renderItem={(item) => {
                  return (
                    <List.Item key={item.id}>
                      <ResourceCard resourceId={item.id} />
                    </List.Item>
                  );
                }}
              />
            </Card>
          </Col>
        </Row>
      </GridContent>
    </div>
  );
};

export default ResourceDetail;
